/** { "style":{ "navigationStyle": "custom", "navigationBarTextStyle": "white" }, tabBar:{ index:1, "iconPath":
"/static/common/tabBar/b.png", "selectedIconPath": "/static/common/tabBar/b1.png", "text": "保险" } } */
<template>
	<view class="pb50">
		<view class="bar" :style="{ height: customBar + 'px' }">
			<view class="page-top plr24" :style="{
					height: customBar - statusBar + 'px',
					top: statusBar + 'px',
					lineHeight: customBar - statusBar + 'px'
				}">
				保险
			</view>
		</view>
		<view class="ww100" :style="{ height: customBar + 'px' }"></view>
		<view class="page-info">
			<u-parse :content="detail"></u-parse>
			<!-- <image class="page-top" src="__ROOT__/common/images/bx-bg.png" mode=""></image>

			<view class="info">
				保险的相关介绍，公司提供太平洋保险、某某保险服务，专业可靠公司提供太平洋保险、某某保险服务，专业可靠公司提供太平洋保险、某某保险服务，专业可靠公司提供太平洋保险、某某保险服务，专业可靠。内容后台上传。
			</view> -->
		</view>

		<view class="form-page form-base">
			<view class="box-top flex-lr-tbc">
				<view class="title-bar">
					<text>保险咨询</text>
				</view>

				<view class="more flex-tbc" @click="jumpJl">
					历史记录
					<image class="w11 h19 ml10" src="__ROOT__/common/images/row-r1.png" mode=""></image>
				</view>
			</view>

			<view class="form-item flex-lr-tbc" @click="onShowPick">
				<view class="le">车辆</view>

				<view class="right flex-tbc input-right">
					<picker-text class="picker-s" :pickerValue="charInfo.code" placeholder="请选择车辆" />

					<image class="w11 h19 ml10" src="__ROOT__/common/images/row-r1.png" mode=""></image>
					<!-- <input type="text" placeholder="请选择车辆" placeholder-class="color: #BDBDBD;font-size: 30rpx;"> -->
				</view>
			</view>

			<view class="form-item flex-lr-tbc">
				<view class="le">姓名</view>

				<view class="right flex-tbc input-right">
					<input type="text" placeholder="请输入" v-model="formData.name"
						placeholder-class="color: #999;font-size: 28rpx;" />
				</view>
			</view>

			<view class="form-item flex-lr-tbc">
				<view class="le">手机号</view>

				<view class="right flex-tbc input-right">
					<input type="number" maxlength="11" placeholder="请输入" v-model="formData.mobile"
						placeholder-class="color: #999;font-size:28rpx;" @input="inputNum" />
				</view>
			</view>

			<view class="form-item flex-lr-tbc">
				<view class="le">身份证号（选填）</view>

				<view class="right flex-tbc input-right">
					<input type="idcard" placeholder="请输入" v-model="formData.sfz"
						placeholder-class="color: #999;font-size:28rpx;" />
				</view>
			</view>

			<view class="form-item">
				<view class="le">身份证（正反面）/营业执照照片</view>

				<view class="right flex-tbc input-right mt20">
					<upload-image :fileList="fileList1" :maxCount="6" @upload="upload1" />
				</view>
			</view>

			<view class="form-item">
				<view class="le">其他资料（选填）</view>

				<view class="right flex-tbc input-right mt20">
					<upload-image :fileList="fileList" :maxCount="6" @upload="upload" />
				</view>
			</view>

			<view class="plr24 mt15 btns1 flex-lr-tbc">
				<view class="btn btn-1">
					客服
					<button open-type="contact" class="btn-c"></button>
				</view>

				<view class="btn btn-2" @click="submitApply">
					提交申请
				</view>
				<!-- <view class="btn-w" @click="submitApply">提交申请</view> -->
			</view>

			<view class="hint flex-all-c">
				<!-- 稍后会有工作人员与您联系 -->
				<!-- 	<view class="relative text">
					点击与客服联系
					<button open-type="contact" class="btn-c"></button>
				</view> -->

			</view>
		</view>

		<view class="fild">
			<image src="__ROOT__/common/images/kefu.png" mode=""></image>
			<button open-type="contact" class="btn-c"></button>
		</view>

		<xi-select ref="selectRef" v-model="selectV" :options="charList" keyName="code" @change="onSelect" />

		<u-popup :show="showPopup" mode="center" @close="showPopup = false" bgColor="transparent">
			<view class="content-p">
				<view class="cosnt">您的车辆有违章未处理， 请处理后再提交</view>

				<view class="btns display_flex">
					<view class="btn btn1 flex_1" @click="showPopup = false">取消</view>
					<view class="btn btn2 relative flex_1">
						联系客服
						<button open-type="contact" class="btn-c"></button>
					</view>
				</view>
			</view>
		</u-popup>

		<tabbar name="/pages/main/baoxian" :fixed='true' :isShowBaoxian="isShowBaoxian" />
	</view>
</template>
<script setup>
	import {
		ref,
		onMounted,
		nextTick
	} from 'vue';
	import tabbar from '@/components/tabbar.vue'
	import pickerText from '@/components/picker-text.vue';
	import {
		inputNumber
	} from '@/utils/global.js'

	const isiPhone = ref('');
	const statusBar = ref('');
	const customBar = ref('');
	const isShowBaoxian = ref(false)
	const initPage = () => {
		isiPhone.value = uni.getStorageSync('isiPhone');
		statusBar.value = uni.getStorageSync('statusBar');
		customBar.value = uni.getStorageSync('customBar');
	};

	const showPopup = ref(false);

	const charList = ref([]);

	const selectRef = ref(null);
	const selectV = ref('');

	const jumpJl = () => {
		uni.navigateTo({
			url: '/pages/mine/mine/bxApply'
		})
	}

	const formData = ref({
		car_id: '',
		images: '',
		name: '',
		mobile: '',
		sfz: '',
		sfz_image: ''
	});

	const charInfo = ref({});

	const onShowPick = () => {
		// selectV.value = formData.value.char
		const token = uni.getStorageSync('token');
		if (!token) {
			uni.showModal({
				title: '温馨提示',
				content: '请先登录~',
				showCancel: false,
				confirmText: '去登录',
				confirmColor: '#0f956e',
				complete() {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			})
			return;
		}
		nextTick(() => {
			selectRef.value.show();
		});
	};

	const fileList = ref([]);

	const upload = (e) => {
		fileList.value = e;
	};

	const fileList1 = ref([]);

	const upload1 = (e) => {
		fileList1.value = e;
	};
	const idCard = (value) => {
		return /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(value);
	}

	const inputNum = (e) => {
		const v = inputNumber(e.detail.value)

		nextTick(() => {
			formData.value.mobile = v
		})
		// inputNumber(e, formData, 'num')
	}

	const submitApply = async () => {
		if (charInfo.value.w_state == "未处理") {
			showPopup.value = true;
			return;
		}
		if (!charInfo.value.id) {
			xaoi.toast('请选择车辆');
			return;
		}

		if (!formData.value.name) {
			xaoi.toast('请输入姓名');
			return;
		}

		if (!formData.value.mobile) {
			xaoi.toast('请输入手机号');
			return;
		}

		if (!/^1\d{10}$/.test(formData.value.mobile)) {
			uni.showToast({
				title: '请输入正确的手机号',
				icon: 'none'
			});
			return;
		}

		// if (!formData.value.sfz) {
		// 	xaoi.toast('请输入身份证号');
		// 	return;
		// }


		// if (!formData.value.sfz) {
		// 	xaoi.toast('请输入身份证号');
		// 	return;
		// }

		// if (!idCard(formData.value.sfz)) {
		// 	uni.showToast({
		// 		icon: 'none',
		// 		title: '请输入正确的身份证号'
		// 	});
		// 	return;
		// }

		if (!fileList1.value || fileList1.value.length == 0) {
			xaoi.toast('请上传身份证（正反面）/营业执照照片');
			return;
		}


		// if (!fileList.value || fileList.value.length == 0) {
		// 	xaoi.toast('请上传其他资料');
		// 	return;
		// }

		if (fileList.value && fileList.value.length > 0) {
			formData.value.images = fileList.value.map((item) => item.url).join(',');
			return;
		}

		formData.value.car_id = charInfo.value.id;
		formData.value.sfz_image = fileList1.value.map((item) => item.url).join(',');
		const res = await $post('/stores/add_insure_order', formData.value);

		if (!res) {
			// xaoi.toast('提交成功');
			resetData()
			uni.showModal({
				title: '',
				content: '提交成功，请与客服联系',
				showCancel: false,
				confirmText: '确认',
				confirmColor: '#0f956e',
				complete() {

				}
			})
			// setTimeout(() => {
			// 	resetData()
			// }, 1000);
		}
	};

	const onSelect = (e) => {
		console.log(e, '12312321')
		formData.value.name = e.car_name
		formData.value.mobile = e.car_mobile
		charInfo.value = e;
	};

	const tishi = () => {
		uni.showModal({
			title: '',
			content: '您的车辆有违章未处理，请处理后再提交',
			// 确认按钮
			confirmText: '联系客服',
			// 取消按钮
			cancelText: '取消',
			// 按钮颜色
			confirmColor: '#348B8A',
			success: async (res) => {
				if (res.confirm) {}
			}
		});
	};

	const getMyCar = async () => {
		let res = await $post('/user/get_my_car', {
			page: 1,
			limit: 999
		});
		charList.value = res.list;
	};
	const detail = ref('');
	const getConf = async () => {
		let res = await $post('/user/get_conf', {
			type: '保险说明'
		});
		detail.value = res.info;
	};


	const resetData = () => {
		formData.value = {
			car_id: '',
			images: '',
			name: '',
			mobile: '',
			sfz: '',
			sfz_image: ''
		};
		charInfo.value = {};
		fileList.value = [];
		fileList1.value = [];
	}

	// Vue.onHide(() => {

	// });
	const userInfo = ref({})
	const getUserInfo = async () => {
		const res = await $post('/user/get_user')
		userInfo.value = res.info
		// formData.value.mobile = res.info.mobile
	}
	Vue.onShow(() => {
		initPage();
		getConf();
		const token = uni.getStorageSync('token')
		if (token) {
			getMyCar();
			getUserInfo()
		}
		const envVersion = uni.getStorageSync('envVersion')
		
		if (envVersion == 'release') {
			isShowBaoxian.value = true
			
		} else {
			isShowBaoxian.value = false
			uni.switchTab({
				url: '/pages/index/index'
			})
			uni.hideTabBar({
				index: 1
			})
		}
	});
	Vue.onLoad(() => {});
</script>
<style scoped lang="scss">
	.bar {
		width: 100%;
		background-color: #fff;
		position: fixed;
		left: 0;
		top: 0;

		.page-top {
			width: 100%;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 34rpx;
			color: #1d2129;
			position: absolute;
			left: 0;
		}
	}

	.page-info {
		padding: 10rpx 24rpx 28rpx;
		background-color: #fff;

		image {
			width: 100%;
			height: 216rpx;
		}

		.info {
			font-family: OPPOSans, OPPOSans;
			font-weight: 400;
			font-size: 26rpx;
			color: #666666;
			line-height: 50rpx;
			margin-top: 32rpx;
		}
	}

	.form-page {
		margin-top: 20rpx;
		background-color: #fff;

		.box-top {
			padding: 42rpx 24rpx 30rpx;
		}

		.more {
			font-family: OPPOSans, OPPOSans;
			font-weight: 400;
			font-size: 24rpx;
			color: #7d7d7d;
			line-height: 40rpx;
		}

		.hint {
			font-family: OPPOSans, OPPOSans;
			font-weight: 400;
			font-size: 24rpx;
			color: #348b8a;
			line-height: 24rpx;
			text-align: center;
			margin-top: 20rpx;

			// padding: 30rpx 0;
			.text {
				padding: 10rpx 0 30rpx;
			}
		}
	}

	.content-p {
		width: 576rpx;
		// height: 374rpx;
		background: #ffffff;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 0 !important;

		.cosnt {
			padding: 96rpx 93rpx 50rpx;
			text-align: center;
		}

		.btns {
			border-top: 1rpx solid #eee;

			.btn {
				height: 112rpx;
				line-height: 112rpx;
				text-align: center;
				font-family: OPPOSans, OPPOSans;
				font-weight: 500;
				font-size: 34rpx;

				&.btn1 {
					color: #999999;
					border-right: 1rpx solid #eee;
				}

				&.btn2 {
					color: #348B8A;
				}
			}
		}
	}

	.fild {
		width: 120rpx;
		height: 112rpx;
		position: fixed;
		right: 20rpx;
		bottom: 351rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.btns1 {
		.btn {
			height: 84rpx;
			text-align: center;
			line-height: 84rpx;
			border-radius: 56rpx 56rpx 56rpx 56rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;

			// border: 1px solid transparent;
			&.btn-1 {
				width: 280rpx;
				background: #40CAA6;
				color: #FFFFFF;
				position: relative;
			}

			&.btn-2 {
				width: 400rpx;
				background: #348B8A;
				color: #FFFFFF;
				// border: 1px solid #348B8A;
			}
		}
	}
</style>